<template>
    <div style="margin-top: 50px">
        <!--修改密码-->
        <el-row style="margin-right: 150px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <span style="font-size: 25px">修改密码</span>
                </div>
            </el-col>
        </el-row>
        <!--修改密码卡片-->
        <el-card class="box-card">
            <span>修改密码</span>
            <el-form ref="form" :model="form" label-width="150px" style="margin-top: 10px;margin-left: 40px;margin-right: 40px">
                <el-form-item label="请输入旧密码">
                    <el-input v-model="oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="请输入新密码">
                    <el-input v-model="newPwd"></el-input>
                </el-form-item>
                <el-form-item label="请确认新密码">
                    <el-input v-model="surePwd" @blur="verfyNew"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="update">修改</el-button>
        </el-card>
    </div>


</template>

<script>
    export default {
        name: "UpdatePwd",
        data(){
            return{
                oldPwd:"",
                newPwd:"",
                surePwd:"",
                pwd:"",
            }
        },mounted() {
            this.aob();
        },
        methods:{
            verfyNew(){
                if (this.newPwd == this.surePwd){
                    return true;
                } else{
                    this.$message({
                        message: '两次密码不一致',
                        type: 'error',
                        duration: 1000
                    });
                    return false;
                }
            },
            verfyOld(){
                if (this.pwd == this.oldPwd){
                    return true;
                }else {
                    this.$message({
                        message: '旧密码验证不通过',
                        type: 'error',
                        duration: 1000
                    });
                    return false
                }
            },
            update(){
                if (this.verfyNew() && this.verfyOld()){
                    let formData = new FormData();
                    formData.append("pwd",this.surePwd);
                    this.axios.put("jxc/user/updatePwd",formData).then(
                        r => {
                            if (r.data == "ok") {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                });
                            } else if (r.data == "no") {
                                this.$message({
                                    message: '修改失败',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                            this.oldPwd = "";
                            this.newPwd = "";
                            this.surePwd = "";
                        }
                    )
                }
            }
        },
        computed:{
            // eslint-disable-next-line vue/return-in-computed-property
            aob(){
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.pwd = this.$store.state.user.userBean.pwd;
            }
        }
    }
</script>

<style scoped>
    .labClass{
        margin-top: 15px;
    }
    .box-card{
        height: 270px;
        margin-top: 10%;
        margin-left: 30%;
        margin-right: 30%;
    }
</style>